<!DOCTYPE html >
<html>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">

<%@include file="/resources/components/baseIncl/base/css.inc"%>
<link href="<%=request.getContextPath()%>/resources/components/baseIncl/css/jquery-ui.css" rel="StyleSheet" type="text/css"/>
<%@include file="/resources/components/baseIncl/base/js.inc"%>
<script src="<%=request.getContextPath()%>/resources/components/baseIncl/js/jquery-ui.min.js"></script>
<title>Amphora Home</title>
<style>
	#contactUsDialog > input[type="text"]{ 
		border: solid 1px #ccc;
	}
</style>
<script>
$(document).ready(function(){
	 $(document).scroll(function() {
	 	var top = $(document).scrollTop();
	 	
	 	if(top > 50){
	 		$("#Heading3").addClass("headingBG");
	 	}else{
	 		$("#Heading3").removeClass("headingBG");
	 	}
	 });
	 $("#contactUS").click(function(){
		 $("#contactUsDialog").removeClass("hidePersonalDialog");
		 $("#modalContactUsBackground").removeClass("hidePersonalDialog");
		 $("#contactUsDialog").addClass("showPersonalDialog");
		 $("#modalContactUsBackground").addClass("showPersonalDialog");
	 });
});
</script>
</head>
<body class="bodyBG">
	<div id="wrapper" >
		<div id="Heading3-alt"><span class="left"><a href="/ClientAction?des"><i class="fa fa-lock fa-2x"></i></a></span>Amphora Home</div>
		<div id="sideBar">
			<div id="fb" class="sideBarIndividual"><a href="http://www.facebook.com"><i class="fa fa-facebook fa-2x"></i></a></div>
			<div id="linkedin" class="sideBarIndividual"><a href="http://www.linkedin.com"><i class="fa fa-linkedin fa-2x"></i></a></div>
			<div id="contactUS" class="sideBarIndividual" ><i class="fa fa-envelope fa-2x"></i></div>
		</div>
		<div id="content">
			<div id="options-1">
				<div id="book">
					<a href="/BookingAction?view"><i class="fa fa-book fa-4x"></i></a>
					<br>Book
				</div><br>
				<div id="prices">
					<a href="/TreatmentsAction?view"><i class="fa fa-list-alt fa-4x"></i></a>
					<br>Prices
				</div><br>
				<div id="view">
					<a href="/CalendarAction?schedule"><i class="fa fa-calendar fa-4x"></i></a>
					<br>Schedule
				</div>
			</div>
		</div>
		<div id="contact-dialog"></div>
		<div id="footer">
			<table cellpadding="2" class="footerTable">
				<tr>
					<td id="copyright"><h4>Copyright</h4></td>
					<td id="contactMe"><h4>Contact</h4></td>
				</tr>
				<tr style="color: white;">
					<td>&copy; Amphora 2014</td>
					<td>
						c: 0726392058<br>
						e: amphora.co@gmail.com
					</td>
				</tr>
			</table>
		</div>
	</div>
	<div id="contactUsDialog" class="hidePersonalDialog">
            <a href="/amphora_home.jsp" class="right close"><i class="fa fa-times"></i></a> 
            <h1>Contact Us</h1>
            <hr class="dashed">
            <div class='left emailSection'>
                <h2>Email</h2><br>
                <input type='text' name='name' size="35" placeholder='Name'/>
                <br><br>
                <input type='text' name='subject' size="35" placeholder='Subject'/>
                <br><br>
                <textarea rows="8" cols="50" name='message' placeholder='Message....'></textarea>
                <br><br>
                <a class="btn btn-primary" href="#"><i class="fa fa-envelope fa-fw"></i> Send</a>
                <a class="btn btn-danger" href="#"><i class="fa fa-eraser fa-fw"></i> Clear</a>
                <br>
            </div>
            <div class="middle">
                <hr class="vertical">    
            </div> 
            <div class="right contactSection">
                <h2>Contact Details</h2><br>
                <label>c: 0726392058</label>
                <br>
                <label>e: amphora.co@gmail.com</label>
                <br>
            </div>
        </div>
        <div id="modalContactUsBackground" class="hidePersonalDialog"></div>
</body>
</html>